﻿@inherits ComponentBase

<CascadingValue Value="this">
    @ChildContent
    <div class="code-snippet card demo-card-wide">
        <div class="code-header card-footer p-0 d-flex">
            <div class="lang-group nav nav-code">
                @foreach(var tabPage in tabPages) {
                    <a @key="@tabPage" href="javascript:;" class="@GetTabCssClass(tabPage)" @onclick="@(() => OnTabClick(tabPage))">@tabPage.Text</a>
                }
            </div>
            <CodeSnippetToolbar DocLink=@DocLink />
        </div>
        <div class="card-footer text-muted">
            @foreach(var tabPage in tabPages.Where(IsActiveTabPage)) {
                @if(tabPage.CodeSnippetTemplate != null) {
                    @tabPage.CodeSnippetTemplate
                }
                else { 
                    <CodeSnippet @key="@tabPage">@tabPage.ChildContent</CodeSnippet>
                }
            }
        </div>
    </div>
</CascadingValue>

@code {
    [Parameter] public string DocLink { get; set; }

    int activeTabIndex = 0;

    int ActiveTabIndex {
        get => activeTabIndex;
        set {
            activeTabIndex = value;
            InvokeAsync(StateHasChanged);
        }
    }

    [Parameter] public RenderFragment ChildContent { get; set; }

    List<CodeSnippetTabPage> tabPages = new List<CodeSnippetTabPage>();

    public void AddTabPage(ComponentBase tabPage) {
        tabPages.Add((CodeSnippetTabPage)tabPage);
        StateHasChanged();
    }

    bool IsActiveTabPage(CodeSnippetTabPage tabPage) {
        return tabPages.IndexOf(tabPage) == ActiveTabIndex;
    }

    string GetTabCssClass(CodeSnippetTabPage tabPage) {
        return string.Join(" ", "nav-link", IsActiveTabPage(tabPage) ? "active border-primary" : "").Trim();
    }

    void OnTabClick(CodeSnippetTabPage tabPage) {
        int tabIndex = tabPages.IndexOf(tabPage);
        if(tabIndex != ActiveTabIndex) {
            ActiveTabIndex = tabIndex;
        }
    }
}
